<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>自助挑选月嫂、月儿嫂</title>
		<script src="../js/flexible_css.debug.js"></script>
		<script src="../js/flexible.debug.js"></script>
		
		<link rel="stylesheet" type="text/css" href="../css/filter.css" />
		<!--[if lt IE 9]>
        <script src="../js/html5shiv.min.js"></script>
		<script src="../js/respond.min.js"></script>
        <![endif]-->

	</head>
	<body>
		
		<main>
			<header>
			<ul>
				<li class="return"><img src="../img/return.png"/></li>
				<li class="list">月嫂选项</li>
				<li class="null"></li>
			</ul>
		</header>
		
		
		<section>
			<div class="content">
				<div class="list_left">
					<ul class="list">
						<li class="active_li">期望价格</li>
						<li>年龄要求</li>
						<li>从业年限</li>
						<li>籍贯</li>
						<li>普通话</li>
						<li>最低学历</li>
					</ul>
					<button class="remove">清除</button>
				</div>
				
				
				<div class="list_right">
					
					<ul>
						<li>
							<span>8800元</span>
							<span class="img active_img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>12800元</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>16800元</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>20800元</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>28800元</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						
					</ul>
					
					<ul style="display: none;">
						<li>
							<span>25岁-30岁</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>30岁-35岁</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>35岁-40岁</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>45岁-50岁</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>50岁以上</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						
					</ul>
					<ul style="display: none;">
						<li>
							<span>2年以上</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>3年以上</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>4年以上</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>5年以上</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>6年以上</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						
					</ul>
					<ul style="display: none;">	
						<li class="input-wrap">
							<select id="sel" class="select" name="province" id="s1">
						  <option>选择省</option>
						  </select>
							<select id="city" class="select" name="city">
						  <option>选择市</option>
						  </select>
							<select id="area" class="select" name="town" id="s3">
						  <option>选择区</option>
						  </select>
						</li>
						
						<li style="border: none;">
							<span></span>
							
						</li>
						<li style="border: none;">
							<span></span>
							
						</li>
						<li style="border: none;">
							<span></span>
							
						</li>
						<li style="border: none;">
							<span></span>
							
						</li>
						
					</ul>
					<ul style="display: none;">
						<li>
							<span>一般</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>标准</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li style="border: none;">
							<span></span>
							
						</li>
						<li style="border: none;">
							<span></span>
							
						</li>
						<li style="border: none;">
							<span></span>
							
						</li>
						
					</ul>
					<ul style="display: none;">
						<li>
							<span>高中毕业</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>中专毕业</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>大专毕业</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						<li>
							<span>本科毕业</span>
							<span class="img"><img src="../img/ok.png"/></span>
						</li>
						
						<li style="border: none;">
							<span></span>
							
						</li>
					</ul>
					<footer class="ensure">
                  <button>确定</button>
                  </footer>
				</div>
			</div>
		</section>
		</main>
		<script src="../js/jquery-3.2.1.js"></script>
		<script src="../js/mock.js"></script>
		<script src="../js/mockjs.js"></script>
		<script>
			$(function(){
				$('.list_left ul li').click(function(){
				var index=$(this).index();
				$(this).parent().parent().next().children().siblings('ul').hide().eq(index).fadeIn();
				$('.active_li').removeClass('active_li')
				$(this).addClass('active_li')
			})
				$('.list_right ul li .active_img').show();
			$('.list_right ul li').click(function(){
				$(this).children(1).show()
				$(this).siblings().children(0).next().hide()
			})
			$('.ensure button').click(function(){
					location.href="homepage.html";
				});
			$('.return').click(function(){
					location.href="homepage.html";
				});
			$('.remove').click(function(){
				$('.img').hide();
			})
							//获取城市商品code 因为不是每个市都开通了  所以一数组的方式对开通的市进行筛选
			var indexArea = ['昆山市', '湘潭市', '益阳市', '济南市', '咸宁市', '长沙市', '株洲市', '泉州市', '郑州市', '延安市', '汉中市', '合肥市', '亳州市', '福州市', '厦门市', '武汉市', '十堰市', '伊宁市', '玉溪市', '克拉玛依市', '广州市', '深圳市', '珠海市', '西安市', '石家庄市', '宝鸡市',
				'桂林市', '成都市', '北京市', '天津市', '绥化市', '上海市', '南京市', '咸阳市', '惠州市', '三亚市', '邢台市', '杭州市', '承德市', '廊坊市', '沈阳市', '保定市', '眉山市', '苏州市', '南市', '吉林市', '哈尔滨市', '呼和浩特市', '包头市', '呼伦贝尔市', '霸州市',
			];
			var letObj = {
				
			}
			//省市区三级联动 因为json数据量   因为json数据量太庞大  用get请求有限制 所以使用mockjs  
			//mockjs 第一个参数是拦截的地址  第二个参数是具体的内容
			$.ajax({
				type: 'get',
				url: 'www.baidu.com',
				success: function(data) {
					data = JSON.parse(data);
					//				console.log(data)
					var str = ""
					$.each(data.data, function(index, val) {
						str = "<option>" + val.cityName + "</option>"
						$('#sel').append(str)
					});
					$('body').on('change', '#sel', function(e) {
						//return $('#city').click();
						var index2 = $(this).val();
						var value = $('#sel').prop('selectedIndex');
						if (index2 == '选择省') {
							$('#city').html($('<option>').html('选择市'))
							$('#area').html($('<option>').html('选择区'))
						}
						data.data.filter(function(value, index) {
							if (index2 == value.cityName) {
								var shr = ''
								var alse = ''
								var defalute = value.childList[0].cityCode
								function obj_this(number){
									this.saone = number 
								};
								var o = new obj_this(defalute);
								var Export = $('.over_hide').text(o.saone)
							    var defalute_list = Export.text();
							    letObj.code = defalute_list
					localStorage.setItem('city_code',JSON.stringify(letObj));
								$.each(value.childList, function(index, val) {
									//console.log(val)
									shr += "<option>" + val.cityName + "</option>"
									$('#city').html(shr)
									$.each(val.childList, function(index3, val3) {
										alse += "<option>" + val3.cityName + "</option>"
										$('#area').html(alse)
									});
								});
								//嵌套城市商品code
								var $_ct_value = $('#city').val();
								$.ajax({
									url: '../js/shopcode.json',
									type: 'get',
									dataType: 'json',
									success: function(data) {
										indexArea.filter(function(o, i) {
											if ($_ct_value == o) {
												//console.log(data[i])
												$('#text_this').val(data[i].code);
											var SHOPCODE = $('#text_this').val();
											localStorage.setItem('SHOPCODE',SHOPCODE)
											} else {
												false
											}
										})
									}
								})
							}
						});
					});
					//层级关系复杂
					$('body').on('change', '#city', function() {
						var $value = $(this).val();
						//	console.log($value)
						var $index = $('#city').prop('selectedIndex');
						var Html = ''
							// 三级联动 之二级联动 市和区
						data.data.filter(function(_this, da) {
							$.each(_this.childList, function(index, val) {
								if ($value == val.cityName) {
									var code = val.cityCode;
									
									var Text_this = $('.over_hide').text(code)
									var letstring = Text_this.text()
									letObj.list = letstring
						localStorage.setItem('city_code',JSON.stringify(letObj))
									//console.log()
									$.each(val.childList, function(index22, val22) {
										Html += "<option>" + val22.cityName + "</option>"
										$('#area').html(Html)
									});
								}
							});
						})
					})
				},
				error: function(data) {
						//console.log(data)
					}
					//三级联动完
			})
				
			})
		</script>
	</body>
</html>
